<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="dialogAddRole=true">添加角色</el-button>
        </el-col>
      </el-row>
      <!-- 角色列表 -->
      <el-table :data="roleData"stripe size='mini'
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{background:'rgb(17,23,57)','text-align':'center'}">
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="remark" label="角色说明"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top-start"
              :enterable="false"
            >
              <el-button type="primary" icon="el-icon-edit" size="mini"
                         @click="test(scope.row.id)"></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"

              :enterable="false"
            >
              <el-button type="danger" icon="el-icon-delete" size="mini"  @click='deleteRole(scope.row.id)'></el-button>
            </el-tooltip>

            <!-- 分配角色 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="分配权限"
              placement="top-start"
              :enterable="false"
            >
              <el-button type="warning" icon="el-icon-setting" size="mini" @click='test(scope.row.id)'></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[5,10, 20, 30, 40]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
      ></el-pagination>
      <el-dialog title="添加角色" :visible.sync="dialogAddRole" width="50%" @close="closeAddRole">
        <el-form ref="form" v-model="addRoleForm" label-width="80px">
          <el-form-item label="角色名称">
            <el-input v-model="addRoleForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input type="textarea" v-model="addRoleForm.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addSave">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {addRole,queryRoleList,removeRoleId} from '@/api/RoleApi'

export default {
  data() {
    return {
      //控制按钮权限
      is_authority: {
        is_role_del: false,
        is_role_upt: false,
        is_role_add: false,
        is_role_add_role: false
      },
      roleData: [],
      dialogAddRole: false,
      addRoleForm: {},
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      roleVo:{
        page: {
          current: 1,
          size: 10
        }
      }
    }
  },
  created() {
    this.queryPage()
  }
  ,
  methods: {
     queryPage() {
      queryRoleList(this.roleVo).then(res=>{
       //if (res.code != 20000) this.$message.error(res.message)
        // this.roleData = res.data.list
        this.roleData = res.data.list.records
        this.page.total =Number(res.data.list.total)
        this.page.current = Number(res.data.list.current)
        this.page.size = Number(res.data.list.size)
      })
    },
    test(id) {
      this.$router.push({ path: '/resume', query: { jId: id } })
    },
    closeAddRole() {

    },
    addSave() {
      addRole(this.addRoleForm).then(res=>{
       //if (res.code != 20000) this.$message.error(res.message)
        this.dialogAddRole = false
        this.queryPage()
        return this.$notify({
          title: '成功',
          message: 'res.message',
          type: 'success'
        });
      })
    },
    // 监听每页展示的条数
    handleSizeChange(newSize) {
      this.roleVo.page.size = newSize
      this.queryPage()
    },
    //监听页码
    handleCurrentChange(newCurrent) {
      this.roleVo.page.current = newCurrent
      this.queryPage()
    },
    deleteRole(id){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeRoleId(id).then(res=>{
         //if (res.code != 20000) this.$message.error(res.message);
          this.queryPage()
          return this.$notify({title: '成功', message: res.message, type: 'success'});
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
  }

}
</script>
<style lang="sass" scoped>

</style>
